<template>
  <div
    v-if="titleType === 1"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">{{ title }}</div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 2"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div
      :class="`class${titleType}-title`"
      v-angle="{
        angleLength: 10,
        lineWidth: 1,
        color: '#0cbbbe',
        top: -2,
        left: -2,
      }"
    >
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <svg width="10px" height="10px" class="svg1">
      <polyline
        points="0,0,0,10,10,10"
        style="fill: none; stroke-width: 3; stroke: #0c7075"
      ></polyline>
    </svg>
    <svg width="10px" height="10px" class="svg2">
      <polyline
        points="0,0,0,10,10,10"
        style="fill: none; stroke-width: 3; stroke: #0c7075"
      ></polyline>
    </svg>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 3"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      <img src="./img/3.png" alt="" />
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <span class="rect1"></span>
    <span class="rect2"></span>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 4"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <span class="border"></span>
    <span class="border border2"></span>
    <span class="rect1"></span>
    <span class="rect2"></span>
    <span class="rect3"></span>
    <span class="rect4"></span>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 5"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      <img src="./img/5.png" alt="" />
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <span class="rect1"></span>
    <span class="rect2"></span>
    <span class="rect3"></span>
    <span class="rect4"></span>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 6"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">
      {{ context }}
      <span class="line"></span>
      <span class="line"></span>
    </div>
    <span
      v-for="(item, index) in 4"
      :key="'circle' + index"
      :class="['circle', `circle${item}`]"
    >
    </span>
    <span
      v-for="(item, index) in 4"
      :key="'outline' + index"
      :class="['outline', `outline${item}`]"
    >
    </span>
    <TypePolyline
      v-for="(item, index) in 4"
      :key="index"
      points="0,0,0,10,10,20,20,20"
      :customClass="'svg' + item"
    />
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 7"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      <span class="line"></span>
      {{ title }}
      <span class="line"></span>
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 8"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      {{ title }}
    </div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">{{ context }}</div>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 9"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div class="circle"><div class="littleCircle"></div></div>
    <div class="circle"><div class="littleCircle"></div></div>
    <div class="rect rect1"></div>
    <div class="rect rect2"></div>
    <div :class="`class${titleType}-title`">
      <img src="./img/5.png" alt="" />
      {{ title }}
    </div>

    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">
      <div :class="`class${titleType}-body-context`">{{ context }}</div>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 10"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      <img src="./img/5.png" alt="" />
      {{ title }}
    </div>

    <div :class="`class${titleType}-body`">
      <div :class="`class${titleType}-body-context`">{{ context }}</div>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 11"
    :class="['container', `class${titleType}`, customClass]"
  >
    <div :class="`class${titleType}-title`">
      <img src="./img/5.png" alt="" />
      {{ title }}
    </div>
    <div :class="`class${titleType}-line-left`"></div>
    <div :class="`class${titleType}-line-right`"></div>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">
      <div :class="`class${titleType}-body-context`">{{ context }}</div>
    </div>
    <img src="./img/11-1.png" alt="" :class="`class${titleType}-bottom`" />
    <slot></slot>
  </div>
  <div
    v-else-if="titleType === 12"
    :class="['container', `class${titleType}`, customClass]"
  >
    <span :class="`class${titleType}-title`">{{ title }}</span>
    <div :class="`class${titleType}-line`"></div>
    <div :class="`class${titleType}-body`">
      <div :class="`class${titleType}-body-context`">{{ context }}</div>
    </div>
    <slot></slot>
  </div>
  <BaseComponent
    v-else-if="titleType === 13"
    :titleType="titleType"
    :customClass="customClass"
    :context="context"
  >
    <template v-slot:title>
      <div class="class13-title-box">{{ title }}</div>
      <div class="class13-triangle1"></div>
      <div class="class13-triangle1 class13-triangle2"></div>
    </template>
    <template v-slot:line>
      <svg width="100%" height="100%" style="position: absolute">
        <polyline
          points="0,0 0,5 350,5 350,-5"
          fill="none"
          style="stroke: #0c585c; stroke-width: 2"
        ></polyline>
      </svg>
    </template>
  </BaseComponent>
  <BaseComponent
    v-else-if="titleType === 14"
    :titleType="titleType"
    :customClass="customClass"
    :context="context"
    :title="title"
  >
    <template v-slot:body>
      <span class="class14-line-left"></span>
      <span class="class14-line-right"></span>
    </template>
  </BaseComponent>
  <BaseComponent
    v-else-if="titleType === 15"
    :titleType="titleType"
    :customClass="customClass"
    :context="context"
  >
    <template v-slot:title>
      <span class="class15-subtext">{{title}}</span>
      <span class="class15-space-line"></span>
    </template>
  </BaseComponent>
</template>
<script>
import BaseComponent from "./component/base-component.vue";
import TypePolyline from "./component/type6-polyline.vue";

export default {
  name: "data-v-title-panel",
  components: {
    TypePolyline,
    BaseComponent,
  },
  data() {
    return {};
  },
  props: {
    titleType: {
      type: Number,
      default: 1,
    },
    title: {
      type: String,
      default: "",
    },
    context: {
      type: String,
      default: "",
    },
    customClass: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="less" scoped src='./index.less'></style>